<!--
 * @Author: FengTeng
 * @Date: 2021-02-12 11:47:01
 * @LastEditTime: 2021-03-03 12:00:32
 * @LastEditors: FengTeng
 * @Description: Description
 * @FilePath: \spa-manage\src\views\main-menu\MainMenu.vue
-->
<template>
  <div class="main-menu">
    <div class="menu-header">
      <h2>CRM管理系统</h2>
      <div v-if="Object.keys(userInfo).length !== 0" class="user-info">
        <span>你好，{{ userInfo.name }}！</span>
        <el-button type="text" @click="handleUpdatePassword()">修改密码</el-button>
        <el-button type="text" @click="handleLogout()">退出登录</el-button>
      </div>
    </div>
    <div class="menu-list">
      <spa-tree :data="treeList" @node-click="handleNodeClick($event)"></spa-tree>
    </div>
    <div class="menu-content">
      <router-view></router-view>
    </div>
    <update-password-modal ref="updatePasswordModalRef" :modalConfig="updatePwdModalConfig"></update-password-modal>
  </div>
</template>

<script>
// import $ from "jquery";
// import apis from "@/apis/index.js";
import SpaTree from "@/components/spa-tree/SpaTree.vue";
import UpdatePasswordModal from "@/components/modal/update-password-modal/UpdatePasswordModal.vue";
import { CLEAR_PEIMISSION_INFO } from "@/store/auth.permission.js";
import { CLEAR_USER_INFO } from "@/store/userinfo.js";
import { mapState, mapMutations } from "vuex";
export default {
  name: "MainMenu",
  components: {
    SpaTree,
    UpdatePasswordModal
  },
  data() {
    return {
      treeList: [
        {
          label: "客户池",
          nodeKey: "CustomerPool",
          isActived: false,
          isVisibel: false
        },
        {
          label: "会员管理",
          nodeKey: "MemberManage",
          isActived: false,
          isVisibel: false
        },
        {
          label: "会员画像",
          nodeKey: "MemberInfo",
          isActived: false,
          isVisibel: false
        },
        {
          label: "商品管理",
          nodeKey: "ProductsManage",
          isActived: false,
          isVisibel: false
        },
        {
          label: "系统管理",
          nodeKey: "SystemManage",
          isActived: false,
          isVisibel: false
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      updatePwdModalConfig: {
        visible: false,
        CloseOnClickModal: false,
        showClose: true
      }
    };
  },
  computed: {
    ...mapState({
      userInfo: state => JSON.parse(JSON.stringify(state.authInfoModule.userinfo))
    })
  },
  created() {
    this.initTreeData();
  },
  methods: {
    ...mapMutations("permissionModule", {
      clearPermissionInfo: CLEAR_PEIMISSION_INFO
    }),
    ...mapMutations("authInfoModule", {
      clearUserInfo: CLEAR_USER_INFO
    }),
    initTreeData() {
      console.log(this.userInfo);
      // this.treeData.forEach(item => {
      //   switch (item.nodeKey) {
      //     case "CustomerPool":
      //       item.isVisibel = userPermissions.customerPool.lookSearch;
      //       break;
      //     case "MemberManage":
      //       item.isVisibel = userPermissions.memberManage.lookSearch;
      //       break;
      //     case "ProductsManage":
      //       item.isVisibel = userPermissions.productsManage.lookSearch;
      //       break;
      //     case "SystemManage":
      //       item.isVisibel = userPermissions.systemManage.lookSearch;
      //       break;
      //     default:
      //       break;
      //   }
      // });
    },
    handleNodeClick(node) {
      console.log(node);
      this.treeList.forEach(item => {
        if (item.nodeKey === node.nodeKey) {
          item.isActived = true;
        } else {
          item.isActived = false;
        }
      });
      if (node.nodeKey === "CustomerPool") {
        this.$router.push({
          path: "/main-menu/customer-pool"
        });
      } else if (node.nodeKey === "MemberManage") {
        this.$router.push({
          path: "/main-menu/member-manage"
        });
      } else if (node.nodeKey === "MemberInfo") {
        this.$router.push({
          path: "/main-menu/member-info"
        });
      } else if (node.nodeKey === "ProductsManage") {
        this.$router.push({
          path: "/main-menu/products-manage"
        });
      } else if (node.nodeKey === "SystemManage") {
        this.$router.push({
          path: "/main-menu/system-manage"
        });
      } else {
        this.$message.error("页面尚未开发！");
        this.$router.push({
          path: "/main-menu/customer-pool"
        });
      }
    },
    handleUpdatePassword() {
      console.log("更新密码");
      this.$refs.updatePasswordModalRef.openModal(this.userInfo);
    },
    handleLogout() {
      this.clearUserInfo();
      this.clearPermissionInfo();
      this.$message.success("退出成功！");
      this.$router.push({
        path: "/account/login"
      });
    }
  }
};
</script>

<style lang="scss" src="./index.scss"></style>>
